<template>
  <div class="container">
     <div class="mainbody">
      <div class="sidebar" :class="{ open: sidebarOpen }" >
        <div v-if="!sidebarOpen" style="width: 100%;height: 100%;" @click="toggleSidebar">
           
          </div>
          <div v-if="sidebarOpen" class="talk_record">
             <div class="talk_record_head" @click="toggleSidebar">
                   <div class="line">

                   </div>
                   <div class="text">
                       <div>历史对话</div>
                   </div>
             </div>
             <div class="talk_record_content">
                <div v-for="(item,index) in talk_record" class="item" :class="{ bg: selected==index }"  @click="selectitem(index)">
                      <div class="icon1">
                        <el-icon size="20px"><ChatDotRound /></el-icon>
                      </div>
                      <div class="name">
                           <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="item"
                            placement="top"
                            >
                              <div>{{ item.length<8?item:item.substring(0,9)+"....." }}</div>
                            </el-tooltip>
                      </div>
                      <div class="icon2" @click="editname(index)">
                        <el-icon><EditPen /></el-icon>
                      </div>
                      <div class="icon3" @click="deletename(index)">
                        <el-icon><Delete /></el-icon>
                      </div>
                </div>
            </div>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="修改"
            width="30%"
            :before-close="handleClose"
          >
          <el-input v-model="tempname"  />
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="changename">
                  确定
                </el-button>
              </span>
            </template>
          </el-dialog>
      </div>
         <div class="mainbody_head">
             <Head></Head>
         </div>
         <div class="mainbody_content">
            <div class="chat_box">
               
                <!-- 这个是聊天框 -->
                <div class="botoom1">
                  <!-- 这个是文本 -->
                  <div class="chat-content" ref="chatContent1">
                    <div class="chat-wrapper" v-for="item in chatList" :key="item.id">
                      <!-- 判断是用户还是自己 -->
                      <div class="chat-friend" v-if="item.uid !== '1001'">
                      <!-- 这里是对方的对话框 -->
                      <div class="chat-text" v-if="item.chatType == 0">
                        {{ item.msg }}
                      </div>

                      <!-- 这里是对方的聊天时间显示 -->
                      <div class="info-time">
                        <span>{{ item.time }}</span>
                      </div>
                    </div>
                        <!-- 这里是我的聊天内容和显示 -->
                    <div class="chat-me"  v-else>
                          <div class="chat-text" v-if="item.chatType == 0" >
                          {{ item.msg }}
                        </div>
                        <!-- 这里是发送方的时间的显示 -->
                        <div class="info-time">
                          <span>{{ item.time }}</span>
                        </div>
                      </div>
                    </div>
                    </div>
                  </div>
                 <!-- 右边 -->
                    <div class="botoom2">
                  <!-- 这个是文本 -->
                  <div class="chat-content" ref="chatContent">
                    <div class="chat-wrapper" v-for="item in chatList" :key="item.id">
                      <!-- 判断是用户还是自己 -->
                      <div class="chat-friend" v-if="item.uid !== '1001'">
                      <!-- 这里是对方的对话框 -->
                      <div class="chat-text" v-if="item.chatType == 0">
                        {{ item.msg }}
                      </div>

                      <!-- 这里是对方的聊天时间显示 -->
                      <div class="info-time">
                        <span>{{ item.time }}</span>
                      </div>
                    </div>
                        <!-- 这里是我的聊天内容和显示 -->
                    <div class="chat-me"  v-else>
                          <div class="chat-text" v-if="item.chatType == 0" >
                          {{ item.msg }}
                        </div>
                        <!-- 这里是发送方的时间的显示 -->
                        <div class="info-time">
                          <span>{{ item.time }}</span>
                        </div>
                      </div> 
                    </div>
                    </div>
                  </div>


           
            </div>
             <div class="mainbody_content_foot">
                <div class="foot">

                  <div class="leftbtn">
                    <div class="leftimg">
                             <img src="../assets/icon/add.png" style="width: 100%;height: 100%;"/>
                          </div>
                  <div class="btn_lefttext">
                               <div style="font-size: 10px;">新建对话</div>
                          </div>
                      </div>
 
                    <div class="btn">
                          <div class="img">
                             <img src="../assets/icon/refresh.png" style="width: 100%;height: 100%;"/>
                            
                          </div>
                          <div class="btn_text">
                               <div style="font-size: 10px;">清除记录</div>
                          </div>
                    </div>
                    <!-- 输入框和按钮更改 -->
                    <div class="chatInputs">
                          <input class="inputs" v-model="inputMsg" @keyup.enter="sendText" />
                     <!-- 按钮更改 -->
                     <div class="send boxinput"  @click="sendText">
                                <img src="../assets/icon/send.png"  style="width: 100%;height: 100%; border-radius: 15px;" />   
                       </div>
                      </div>
                     <!-- 输入框和按钮更改 -->

                </div>
             </div>
        </div>
     </div>
  </div>
</template>

<script>
import { animation } from "@/func/func";
import Head from "@/components/Head.vue"
export default{
  data(){
    return {
      input:"",
      sidebarOpen: false,
      talk_record:[
          "补发外国人永久身份证",
          "补发外国人在中国广东省的永久居住证明",
          "新建对话",
      ],
      selected:null,
      dialogVisible:false,
      tempname:"",
      inputText: '',
      isFocused: false,
      inputMsg: "",
      chatList: [],
    }
  },
  components:{
   Head
  },
  methods:{
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen; // 切换侧边栏的打开/关闭状态
    },
    selectitem(index) {
      this.selected=index;
      console.log("点击了",this.selected);
    },
    editname(index) {
       this.tempname=this.talk_record[index];
       this.dialogVisible=true;
    },
    changename() {
      this.talk_record[this.selected]=this.tempname;
      this.dialogVisible=false;
    },
    deletename(index) {
      this.talk_record.splice(index, 1);  
    },

     sendMsg(msgList) {
      this.chatList.push(msgList);
      this.scrollBottom();
      this.scrollBottom1();
    },
    //获取窗口高度并滚动至最底层
    scrollBottom() {
      this.$nextTick(() => {
        const scrollDom = this.$refs.chatContent;
        animation(scrollDom, scrollDom.scrollHeight - scrollDom.offsetHeight);
      });
    },
    scrollBottom1() {
      this.$nextTick(() => {
        const scrollDom1 = this.$refs.chatContent1;
        animation(scrollDom1, scrollDom1.scrollHeight - scrollDom1.offsetHeight);
      });
    }, 


    //发送文字信息
    sendText() {
      if (this.inputMsg) {
        let chatMsg = {
          time: "09：12 AM",
          msg: this.inputMsg,
          chatType: 0, //信息类型，0文字，1图片
          uid: "1001", //uid
        };
        this.sendMsg(chatMsg);
        this.inputMsg = "";
      } else {
         alert('内容不可为空哦')
      }
    },
  }
}
</script>

<style  lang="scss" scoped>
.container {
  width: 100vw;     /* 占满浏览器宽度 */
  height: 100vh;    /* 占满浏览器高度 */
  display: flex;
  background-color: grey;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor:default;
  caret-color: transparent;
}
.container .mainbody{
  min-width:75vw;
  width: auto !important;
  height:92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}


.sidebar {
  position: absolute; /* 设置侧边栏为绝对定位，使其脱离文档流 */
  left: 0;
  height:90vh; /* 设置侧边栏的高度为对话框高度*/
  width: 40px; /* 设置侧边栏的默认宽度 */
  background-color:rgba(49, 67, 130, 0.8);
   /* 设置侧边栏的默认背景色，浅蓝色透明 */
  opacity: 0.8;/* 设置侧边栏的默认背景色，浅蓝色透明 */
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  z-index: 999; /* 将侧边栏的层级设置为最高，使其覆盖在内容之上 */
  transition: all 0.1s ease; /* 添加动画过渡效果 */
  pointer-events: auto; /* 禁用侧边栏的鼠标交互事件，使其下面的内容可以点击 */
}

.sidebar.open {
  width: 250px; /* 设置侧边栏打开时的宽度 */
  background-color:#dae7f8 ; ; /* 设置侧边栏的默认背景色，浅蓝色透明 */
  opacity: 1;/* 设置侧边栏的默认背景色，浅蓝色透明 */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  pointer-events: auto; /* 启用侧边栏的鼠标交互事件 */
}

.talk_record {
  height:90vh;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: baseline ;
  align-items: center;
}
.talk_record .talk_record_head {
  height:6vh;
  width: 250px;
  border-top-right-radius: 15px;
  background-color: #c6d8f0;
  display: flex;
  flex-direction: column;
  justify-content: center ;
  align-items: center;
}
.talk_record_head .line {
  width: 80px;
  height: 3px;
  background-color: #000000;
}
.talk_record_head .text {
  width: 85px;
  height: 4vh;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.talk_record .talk_record_content {
  height:80vh;
  width: 250px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: baseline ;
  align-items: center;
}

.talk_record_content .item {
  height:40px;
  width: 250px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.bg {
  background-color: #9ec0ed;
}

.item .icon1 {
  height:40px;
  width: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .icon2 {
  height:30px;
  width: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .icon3 {
  height:30px;
  width: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .name {
  height:40px;
  width: 150px;
  font-size: 14px;
  color: black;
  display: flex;
  flex-direction: row;
  justify-content: baseline ;
  align-items: center;
}
/**
不显示滚动条
 */
::-webkit-scrollbar {
        width: 0px;
    }


.mainbody .mainbody_head {
  min-width: 75vw;
  width: auto !important;
  height: 6vh;
  background-color:  #FFFFFF; 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mainbody_head .left_part {
    min-width: 25vw;
    width: auto !important;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}




.left_part .logo {
  min-width: 10vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content:center;
  align-items: center;
  background-color: aqua;
}

.left_part .tap {
  min-width: 12vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
}

.tap .tap1 {
  min-width: 3vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.tap .tap2 {
  min-width: 6vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.mainbody_head .right_part {
    min-width: 20vw;
    width: auto !important;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.right_part .witcher {
  min-width: 9vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.right_part .headicon {
  min-width: 9vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.mainbody .mainbody_content {
  min-width: 75vw;
  width: auto !important;
  height: 84vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: center;
}

.mainbody_content .chat_box {
  min-width: 70vw;
  width: auto !important;
  height: 65vh;
  margin-top:30px;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 10px;
}

.botoom1{
  height: 67vh;
  min-width: 33vw;
  width: auto !important;
  background-color: #96B4E2;
  width: auto !important;
  margin-left: 20px;
  margin-top:15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(152.12deg, rgba(150, 180, 226, 0.3) 0%, rgba(229, 239, 253, 0.3) 100%);
  box-shadow: 2px 4px 4px rgba(150, 180, 226, 0.17);
  border-radius: 20px;
}

.botoom2{
  height: 67vh;
  min-width: 33vw;
  width: auto !important;
  background-color: #96B4E2;
  width: auto !important;
  margin-right: 10px;
  margin-top:15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(152.12deg, rgba(150, 180, 226, 0.3) 0%, rgba(229, 239, 253, 0.3) 100%);
  box-shadow: 2px 4px 4px rgba(150, 180, 226, 0.17);
  border-radius: 20px;
}

.mainbody_content .mainbody_content_foot {
  min-width: 70vw;
  width: auto !important;
  height: 12vh;
  margin-top: 20px;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mainbody_content_foot .foot {
  min-width: 45vw;
  width: auto !important;
  height: 6vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
}

.chat-content {
      width: 100%;
      height: 90%;
      overflow-y: auto;
      padding: 25px; 
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 0; /* Safari,Chrome 隐藏滚动条 */
        height: 0; /* Safari,Chrome 隐藏滚动条 */
        display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
      }
}
.chat-wrapper {
        position: relative;
        word-break: break-all;
}

.img-good{
  width: 14px;
  height: 14px;
  float: left;
  margin-bottom: 0;
  margin-top: 5px;
  margin-left: -8px;
}
.successparse{
  float: right;
  max-width: 70px;
  margin-top: -35px;
  margin-right:30px;
  font-size: 5px;
  height: auto !important;
  padding: 4px;
  padding-bottom: 1px;
  padding-top: 1px;
  border-radius: 5px;
  background-color:  rgb(16, 86, 226);
  color: #fdfbfb;
  animation-name:fadeOut;
}
.v-enter-active {
      animation: bounce-in 0.5s
}
 
.v-leave-active {
      animation: bounce-in 0.5s reverse
}
@keyframes bounce-in {
      0% {
        opacity: 0;
      }
 
      100% {
         opacity: 1;
      }
}
.local{
  position: absolute; 
  width: 136px;
  height: 29px;
  left: 958px;
  top: 86px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 19px; 
  color: #000000; 
 }
 .img-parse{
  width: 28 px;
  height: 28px;
  margin-top: -39px;
  margin-right:5px;
  float: right;
  display: inline;
}

.chat-me {
          width: 100%;
          float: right;
          margin-bottom: 20px;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: flex-end;
}

.chat-friend{
      width: 100%;
      float: left;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      
}



.chat-text {
  box-sizing: border-box;
      display:inline;
      float: right;
      max-width: 300px;
      height: auto !important;
      padding: 15px;
      padding-bottom: 15px;
      padding-top: 15px;
      font-size: 15px;
      border-radius: 10px 10px 5px 10px;
      background-color: rgb(248, 248, 249);
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400; 
      line-height: 18px;
      text-align:left;
      color: #000000;
      &:hover {
        background-color: rgb(224, 226, 231);
        } 
}

.chat-text2 {
      float:left;
      vertical-align: middle;
      max-width: 300px;
      height: auto !important;
      padding: 20px;
      padding-bottom: 8px;
      color: #fff;
      margin-bottom: 10px;
      background: linear-gradient(102.57deg, #90B6EF 4.48%, rgba(185, 209, 246, 0.664583) 43.97%, rgba(217, 230, 247, 0.7) 90.74%),linear-gradient(#90B6EF,#90B6EF);
      border-radius: 5px;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400; 
      line-height: 18px;
      text-align:left;
      &:hover {
       background: linear-gradient(102.57deg, #8eb6f1 4.48%, rgba(181, 207, 246, 0.665) 43.97%, rgba(211, 227, 248, 0.7) 90.74%),linear-gradient(#90B6EF,#90B6EF);
        } 
}


.info-time {
      margin: 10px 0;
      color: #020202;
      font-size: 14px;
      display: flex;
      justify-content: flex-end;
      span {
        line-height: 30px;
      }
      span:first-child {
        margin-right: 5px;
        vertical-align: middle;
      }
}
.info-time2 {
      display: flex;
      width: 130px;
      color: #020202;;
      font-size: 14px;
      margin-left:50px; 
}

.imgtitle{
      float: left;
      width: 40px;
      height:40px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 10px;
      bottom: 0px;
}


.foot .btn {
  min-width: 100px;
  width: auto !important;
  height: 30px;
  border-radius: 30px;
  background-color: #90A5EF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.btn .img {
  min-width: 1vw;
  width: auto !important;
  height: 4vh;
  margin-right: 5px;
}
.btn .btn_text {
  min-width: 2vw;
  width: auto !important;
  height: 4vh;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.leftbtn {
  margin: 0 20px;
  min-width: 100px;
  width: auto !important;
  height: 30px;
  border-radius: 30px;
  background-color: #90A5EF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: -30px;
}

.leftimg{
  min-width: 1vw;
  width: auto !important;
  height: 3vh;
  margin-right: 5px;
}

.btn_lefttext {
  min-width: 2vw;
  width: auto !important;
  height: 4vh;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}
 
 /* 用来规范按钮和文本框的格式 */
.chatInputs{
   
  min-width: 30vw;
  width: auto !important;
  height: 5vh;
  
  margin-left:2vw;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: baseline;
  align-items: center;

}
/* 输入文本框的格式 */
.inputs {
  width: auto !important;
  caret-color: black; 
   min-width: 33vw;
  height: 5vh;  
  background-color: rgb(254, 255, 255);
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border: 0;
  padding: 10px;
  box-sizing: border-box;
  transition: 0.2s;
  font-size: 16px;
  color: #030000;
  font-weight: 100;
  margin: 0 -10px;
  outline: none;
}

.boxinput {
  min-width: 2vw;
  height: 5vh;
  width: auto !important;
  border: 0;
  background-color: rgb(217, 220, 230);
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}

 
</style>